<template>
	<view class="bg-white">
		<cu-custom title="独立老师注册"></cu-custom>
		<uni-forms ref="baseForm" :modelValue="baseFormData">
		<view class="up  bg-white p-15">
			<view class="flex">
			<view class="m-r-15" style="width: 70%;">
				<view class="f-18">请上传个人头像</view>
				<text class="c-o-9 p-t-15 d-p-b p-b-15">建议上传外形靓丽的真人照片,这样能更好地获得学生和家长的信任哦</text>
			</view>
			<view>
				<uni-file-picker style="display: contents; background: #f8f8f8;"  class=""
					v-model="imageValue"  
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:limit="1"
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					@select="select"
				/>
				<text class="m-t-30 shangchuan">上传照片</text>
			</view>
			</view>
			<view class="   ">
				<view class="c-l d-p-b">
				<view class="fl f-w-b">
					范例
				</view>
				<view class="right-in m-t-25 ">
					
					
				</view>
				</view>
				<view class="c-l w-1-0-0  t-a-c p-t-15" style="display: inline-block;">
					<u--image class="f-l" :showLoading="true" radius="10rpx" src="../../static/images/exc.jpg"
						 width="280px"
						height="240rpx"></u--image>
				</view>
			</view>
			
		</view>
		<view class="form-detail " >
			<view class="l-m-b l-m-l">
				
				<text>绑定号码（非必选）</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<input type="number" placeholder="请输入手机号码"/>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail " >
			<view style="position: relative; z-index: 1;">
			<view class="l-m-b l-m-l">
				
				<text>真实姓名</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<input type="text" placeholder="请输入真实姓名，该姓名不对外显示"/>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
			</view>
			<view class="c-l t-a-r p-r-15 w-1-0-0" style="margin-top: 18px; position: absolute;"><text class="c-red f-14">*请输入身份证上的姓名，否则将影响您在平台的账户提现</text></view>
		</view>
		<view class="form-detail " >
			<view class="l-m-b l-m-l">
				
				<text>身份证号</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<input type="number" placeholder="请输入身份证号"/>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="form-detail " >
			<view class="l-m-b l-m-l">
				
				<text>性别</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				
				<radio-group>
				  <radio  />
				  男
				  <radio  />
				  女
				 
				</radio-group>
									
			</view>
		</view>
		<view class="form-detail " >
			<view class="l-m-b l-m-l">
				
				<text>国家/地区</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>					
			</view>
		</view>
		<view class="form-detail">
			<view class="l-m-b l-m-l">
				
				<text >详细地址</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<input type="number" placeholder="如街区、门牌号、小区、乡镇、村等"/>
				
				
				<view class=""><uni-icons type="location" size="28" color="red" style="display: block; height: 35rpx; margin-top: -10px;"></uni-icons><text class="f-14">定位</text></view>
			</view>
		</view>
		
		<view class="form-detail "   style="border-bottom:0px solid #f8f8f8 ;">
			<view class="l-m-b l-m-l">
				
				<text>授课年级</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				
				<radio-group>
				  <radio  />
				  选择学校
				  <radio  />
				  手动输入学校名称
				 
				</radio-group>
									
			</view>
			<view class="bg-white">
			<view class="l-m-b l-m-l">
				
				
			</view>
			<view class="l-m-b-1 l-m-r">
				<ld-select :multiple="true" :list="options"
				                label-key="label" value-key="value"
				                placeholder="请选择"
				                clearable
				                v-model="value2" style=" margin-right: 20px; margin-top: 10px;"></ld-select>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>										
			</view>
			</view>
		</view>
		<view class="form-detail c-l" >
			<view class="l-m-b l-m-l">
				
				<text>教学科目</text>
			</view>
			<view class="l-m-b-1 l-m-r">
				<!-- <text>138****8888</text> -->
				<picker @change="teachbindPickerChange" :value="indexteach" :range="arrayteach">
					<view class="uni-input">{{arrayteach[indexteach]}}</view>
				</picker>
				<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
			</view>
		</view>
		<view class="up  bg-white m-t-10 ">
			<view class="form-detail " >
				<view class="l-m-b l-m-l">
					
					<text>毕业院校</text>
				</view>
				<view class="l-m-b-1 l-m-r">
					<input type="number" placeholder="如街区、门牌号、小区、乡镇、村等"/>
					<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>							
				</view>
			</view>
			<view class="form-detail c-l" >
				<view class="l-m-b l-m-l">
					
					<text>学历</text>
				</view>
				<view class="l-m-b-1 l-m-r">
					<!-- <text>138****8888</text> -->
					<picker @change="xuelibindPickerChange" :value="indexxueli" :range="arrayxueli">
						<view class="uni-input">{{arrayxueli[indexxueli]}}</view>
					</picker>
					<u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
				</view>
			</view>
			<view class="b-b-8 p-b-10 p-t-10" >
				<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传法人身份证正反面</view>
				<view class="p-15">
				<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
				</view>
				</view>
			<view class="b-b-8 p-b-10 p-t-10" >
				<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传本人与身份证合照</view>
				<view class="p-s-r m-l-15">
				<uni-file-picker  class="m-t-15 upload-img"
					v-model="imageValue"  
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:limit="1"
					
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					@select="select"
				/>
				</view>
				
				</view>
				
		</view>
		<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
			<button> 提交认证信息</button>
		</view>
		</uni-forms>
	</view>
</template>

<script>
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	import ldSelect from '@/components/ld-select/ld-select.vue'
	export default {
		components:{RboyUploadSfz,ldSelect},
		data() {
			return {
				imageValue:[],
				formData: {
				// 正面
				obverseUrl: "",
				// 反面
				reverseUrl: "",
				},
				baseFormData: {
									
									sex: 0,
								
									
								},
				imageValue:[],
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				array: ['中国', '美国', '巴西', '日本'],
				arrayteach: ['请选择教学科目','语文', '数学', '英语', '美术'],
				arrayxueli: ['请选择您的学历','中专', '大专', '本科', '研究生'],
				index: 0,
				indexteach: 0,
				indexxueli: 0,
				value: '',
				options: [{
				  value: '选项1',
				  label: '小学一年级'
				}, {
				  value: '选项2',
				  label: '小学二年级'
				}, {
				  value: '选项3',
				  label: '小学三年级'
				}, {
				  value: '选项4',
				  label: '小学四年级'
				}, {
				  value: '选项5',
				  label: '小学五年级'
				}],
				value2: [],
				value3: ['选项1','选项2'],
				value4: []
			}
		},
		 onLoad() {
		            let that = this
		            // 回显
		            setTimeout(function(){
		                that.value2 = []
		            }, 2000)
		        },
		methods: {
			descInput() {
				let txtVal = this.dataInfo.length;
				this.start = txtVal;
			},
			
		
			// 身份证
			// 上传
			sfz_chagne(e) {
				if (e.name == "obverse") {
					this.formData.obverseUrl = e.tempFilePath
				} else if (e.name == "reverse") {
					this.formData.reverseUrl = e.tempFilePath
				}
			},
			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.formData.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.formData.reverseUrl = ""
				}
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			},
			teachbindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.indexteach = e.detail.value
			},
			xuelibindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.indexxueli = e.detail.value
			},
			selectChange(val){
				console.log(val);
			}
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
/deep/.uni-file-picker__header{ display: none;}
/deep/.file-picker__box-content{ height: 60px; width: 80px; background-color: RGB(245,245,245); color: #999;}
/deep/.icon-add{ background: #ddd; width: 30px; height: 5px; margin-top: -5px;}
.shangchuan{ display: block; width: 80px; color: #999; text-align: center;background-color: RGB(245,245,245); margin-top: 32px; z-index: 999; padding: 5px 0px; font-size: 14px; position: relative;}
.form-detail{ background: #fff; font-size: 32rpx; border-bottom: 1px solid #f8f8f8;  height: 98rpx; line-height: 98rpx; display: flex-bettwen;}
.l-m-b{ display: flex;  font-size: 16px;  font-weight: bold;
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.img-s{ height: 35px; width: 35px;}
.l-m-l{ float: left; padding-left: 35rpx;}
.l-m-r{ float: right; padding-right: 35rpx; height: 98rpx; line-height: 98rpx;  text-align: right; }
uni-image>div, uni-image>img{ height: 15rpx !important; width: 15rpx !important;}
.icon1{ color: #000;}
.text-3{ border: 1px solid #f8f8f8; padding: 15px;}
.b-t-n{ border-bottom: none;}
.b-u-c button{ background: #EA3457; color: #fff; border: none; width: 100%; border-radius: 50rpx;}
.h-80{ height: 80px; line-height: 80px;}
.stu-infor{ padding-left: 15px; font-weight: normal; color: #999;}
.button-fill{ border-radius: 40rpx; margin-top: 19rpx; height: 60rpx; line-height: 60rpx; width: 120rpx; font-size: 14px; margin-left: 10px;}
.bt-grey{border: 1px solid #999; color: #666; background: #fff;}
.lamo{height: 50px; line-height: 50px;}
.cle-p{ font-size: 18px; height: 80px; line-height: 80px; text-align: center; clear: both;
text.add-chil{ padding-left: 15px;}
}
.uniui-plusempty{ border: 2px solid #666; border-radius: 30px;}
.in-text{ }
.l-m-b-1{font-size: 14px;display: flex;
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
input{font-size: 14px; height: 50px; line-height:50px; }
}
/deep/.uni-radio-input{ width: 18px; height: 18px;}
/deep/uni-radio::before{ right: 2px;}
/deep/uni-radio{ margin-left:15px; margin-right: 5px;}
/deep/.iconcross:before{ margin-right: 25px;}
/deep/.input{border-color: rgba(0, 0, 0, 0);}
</style>
